<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <!--    引入路由文件-->
    <script src="../js/vue-router3.js"></script>
</head>
<body>
<!--
    通过前面组件的学习,后续在渲染页面效果时可以通过编写组件的形式完成
    如果组件需要渲染在页面中 需要手动的将组件标签声明在容器中  无法实现动态操作

   登录   /login      <login></login>
   注册  /register    <register></register>

   如何实现根据用户访问的资源地址  动态的加载组件进行渲染
   指定映射规则  路由列表  资源路径和组件的对应关系
   routes = [
        {
            path:'/login',
            component: login
        },
         {
            path:'/register',
            component: register
        }
   ]

  引入 vue中的插件 vue-router 实现资源和组件的映射关系


-->
<div id="app">
    <p>这是容器中的默认数据1</p>
    <p>这是容器中的默认数据2</p>
    <!--声明路由组件的出口-->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>


<script>
    /*定义路由组件  login  register*/
    let login = {
        template: `
        <div>
            <h2>登录</h2>
            <form action="#">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="submit" value="立即登录"></p>
            </form>
        </div>
        `
    }

    let register = {
        template: `
        <div>
            <h2>注册</h2>
            <form action="#">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="password" placeholder="请输入密码"></p>
                <p><input type="submit" value="立即注册"></p>
            </form>
        </div>
        `
    }

    let file404 = {
        template: `
            <div>404 页面找不到</div>
        `
    }

    // 定义路由列表   路径和组件的映射关系
    let routes = [
        {
            path: '/',
            redirect:'/login'   // 重定向
        },
        {
            path: '/login',  // 路径
            component: login  // 路径对应的组件
        },
        {
            path: '/register',
            component: register
        },
        {
            path: '/*',
            component: file404
        }
    ]

    // 创建路由对象 router
    let router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        components: {
            login, register
        },
        //     扩展vue的路由功能
        router
    })

</script>

</body>
</html>